<template>
    <div class="content-el-tabs">
        <el-tabs :tab-position="tabPosition" v-model="selected">
            <el-tab-pane label="项目汇总" name="summary"><component v-if="selected == 'summary'" :is="summary" /></el-tab-pane>
            <el-tab-pane label="开票收款" name="InvoiceCollection"><component v-if="selected == 'InvoiceCollection'" :is="InvoiceCollection" /></el-tab-pane>
            <el-tab-pane label="盈亏分析表" name="phase"><component v-if="selected == 'phase'" :is="phase" /></el-tab-pane>
            <el-tab-pane label="项目成本统计" name="cost"><component v-if="selected == 'cost'" :is="cost" /></el-tab-pane>
            <el-tab-pane label="材料供应" name="material"><component v-if="selected == 'material'" :is="material" /></el-tab-pane>
            <el-tab-pane label="双包" name="double"><component v-if="selected == 'double'" :is="double" /></el-tab-pane>
            <el-tab-pane label="单包" name="packages"><component v-if="selected == 'packages'" :is="packages" /></el-tab-pane>
            <el-tab-pane label="临时工" name="temporaryWorker"><component v-if="selected == 'temporaryWorker'" :is="temporaryWorker" /></el-tab-pane>
            <el-tab-pane label="零星采购" name="materialSmall"><component v-if="selected == 'materialSmall'" :is="materialSmall" /></el-tab-pane>
            <el-tab-pane label="管理人员费用" name="ManagementPersonnel"><component v-if="selected == 'ManagementPersonnel'" :is="ManagementPersonnel" /></el-tab-pane>
            <el-tab-pane label="内签设计费用" name="InternalDesign"><component v-if="selected == 'InternalDesign'" :is="InternalDesign" /></el-tab-pane>
            <el-tab-pane label="项目部费用" name="department"><component v-if="selected == 'department'" :is="department" /></el-tab-pane>
            <el-tab-pane label="费用分摊" name="sharing"><component v-if="selected == 'sharing'" :is="sharing" /></el-tab-pane>
            <el-tab-pane label="后续费用（预估）" name="subsequent"><component v-if="selected == 'subsequent'" :is="subsequent" /></el-tab-pane>
            <el-tab-pane label="税金计算" name="taxes"><component v-if="selected == 'taxes'" :is="taxes" /></el-tab-pane>
            <el-tab-pane label="公司管理费" name="company"><component v-if="selected == 'company'" :is="company" /></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { TabsInstance } from 'element-plus';
import summary from './costs/summary.vue';
import InvoiceCollection from './costs/InvoiceCollection.vue';
import phase from './costs/phase.vue';
import cost from './costs/cost.vue';
import material from './costs/material.vue';
import double from './costs/double.vue';
import packages from './costs/packages.vue';
import temporaryWorker from './costs/temporaryWorker.vue';
import materialSmall from './costs/materialSmall.vue';
import ManagementPersonnel from './costs/ManagementPersonnel.vue';
import InternalDesign from './costs/InternalDesign.vue';
import department from './costs/department.vue';
import sharing from './costs/sharing.vue';
import subsequent from './costs/subsequent.vue';
import taxes from './costs/taxes.vue';
import company from './costs/company.vue';

const tabPosition = ref<TabsInstance['tabPosition']>('top')
const selected = ref<string>('summary')
</script>

<style scoped>
</style>